<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            padding: 20px;
            background-color: #f0f3f9;
            counter-reset: images;
            width: 400px;
            height: 300px;
            align-items: center;
            border: 1px solid #000;
        }

        .children {
            width: 100px;
            position: relative;
            counter-increment: images;
        }

        .children::before {
            content: counter(images);
            position: absolute;
            left: 0;
            top: 0;
            width: 25px;
            height: 25px;
            background-color: red;
            color: #fff;
            line-height: 25px;
            text-align: center;
            border-radius: 50%;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .select-item {
            margin-bottom: 10px;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div class="select-item">
        <input type="radio" id="auto" name="vegetable" value="auto" checked/>
        <label for="auto">auto</label>

        <input type="radio" id="flex-start" name="vegetable" value="flex-start" />
        <label for="flex-start">flex-start</label>

        <input type="radio" id="flex-end" name="vegetable" value="flex-end" />
        <label for="flex-end">flex-end</label>

        <input type="radio" id="center" name="vegetable" value="center" />
        <label for="center">center</label>


        <input type="radio" id="baseline" name="vegetable" value="baseline" />
        <label for="baseline">baseline</label>


        <input type="radio" id="stretch" name="vegetable" value="stretch" />
        <label for="stretch">stretch</label>

    </div>

    <div class="box">
        <div class="children">
            <img src="https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/%E5%86%B0%E5%86%B0.jpg" alt="">
        </div>
        <div class="children"><img src="https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/%E5%86%B0%E5%86%B01.jpeg"
                alt=""></div>
        <div class="children"><img src="https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/%E5%86%B0%E5%86%B02.jpg"
                alt=""></div>
        <div class="children"><img src="https://linglan008-blog.oss-cn-hangzhou.aliyuncs.com/%E5%86%B0%E5%86%B03.jpg"
                alt=""></div>
    </div>

    <script>
        const selectEl = document.getElementsByClassName('select-item')[0]
        const children = document.getElementsByClassName('children')[2]
        selectEl.addEventListener('click', (e) => {
            if (e.target.nodeName === 'INPUT') {
                children.style.alignSelf = e.target.value
            }
        })
    </script>
</body>

</html>